<template>
  <div class="image-upload">
    <!-- 
      action: 指明上传的服务器地址
      list-type: picture-card 照片墙，添加外边框
      file-list: 收集上传的文件列表
      on-preview: 图片预览钩子
      on-remove: 图片删除钩子
      http-request: 自定义上传行为，覆盖el-upload默认的上传行为
      before-upload: 上传的校验
     -->
    <el-upload
      action="#"
      list-type="picture-card"
      :file-list="fileList"
      :on-preview="onPreview"
      :on-remove="onRemove"
      :before-upload="handleBeforeUpload"
      :http-request="handleRquest"
      :class="{ disabled: fileList.length > 0 }"
    >
      <!-- +号小图标 -->
      <i class="el-icon-plus"></i>
    </el-upload>
    <!-- 弹框 -->
    <el-dialog title="图片预览" :visible="isShow" @close="isShow = false">
      <img :src="imgUrl" width="100%" />
    </el-dialog>
  </div>
</template>

<script>
// 导入 COS 模块包
import COS from "cos-js-sdk-v5";
// 实例化，配置 SecretId + SecretKey
const cos = new COS({
  SecretId: "AKIDSggSyHBG5lBnAHwqRvviFZfV5PULmtmy",
  SecretKey: "6wasPhDUXXJ2cy5wNdJyNWP5Wkm3vZy8",
});
export default {
  name: "ImageUpload",
  data() {
    return {
      // 显示的文件列表
      fileList: [],
      // 控制预览弹框的可见性
      isShow: false,
      // 记录当前选择的图片路径
      imgUrl: "",
    };
  },
  methods: {
    // 上传前的校验
    handleBeforeUpload(file) {
      // 1. 类型
      if (!/\.(png|jpe?g|gif|webp)$/i.test(file.name)) {
        this.$message.warning("你瞎啊、不认识图片，需要劳资教你么");
        return false;
      }
      // 2. 大小
      const isGt2M = file.size / 1024 / 1024 > 2;
      if (isGt2M) {
        this.$message.warning("图片不能超过2M");
        return false;
      }
      // 通过校验了
      return true;
    },
    // 预览钩子(函数)
    onPreview(file) {
      // 1. 显示弹框
      this.isShow = true;
      // 2. 展示当前预览的图片
      this.imgUrl = file.url;
    },
    // 删除钩子
    onRemove() {
      // 这里是单图上传，删了之后，只需要把fileList置空
      this.fileList = [];
    },
    // 自己处理图片上传操作
    handleRquest({ file }) {
      // URL.createObjectURL(图片文件对象): 创建一个图片文件对象的临时路径
      const tempUrl = URL.createObjectURL(file);
      // 把图片的临时路径，暂时放入 fileList 数组中
      this.fileList = [{ url: tempUrl }];

      // 把 file 文件对象上传至 腾讯云服务器

      cos.putObject(
        {
          // 桶名称
          Bucket: "fantong-1305128831",
          // 地区
          Region: "ap-guangzhou",
          // 上传成功的文件名
          Key: "姬霓太美",
          // 上传的文件对象
          Body: file,
        },
        (err, data) => {
          // 上传出错了
          if (err) {
            this.$message.error("上传失败");
            return;
          }
          // 上传成功
          this.$message.success("上传成功");
          // 保存上传成功的图片路径
          this.fileList[0].url = `https://${data.Location}`;
          // 通过触发自定义事件，通知外界，图片上传成功，并且携带数据
          this.$emit("on-success", data);
        }
      );
    },
  },
};
</script>

<style lang="scss">
.disabled {
  .el-upload {
    display: none;
  }
}
</style>
